虛擬背景

更新時間：2024-06-21 18:34:41

最近更新時間：2024-06-14

一、功能說明

本文將介紹如何在通話過程中實現虛擬背景的功能。功能展示如下：

原始攝影機	背景圖片

二、事前準備

請確保已開通該功能，可聯絡銷售人員開通。
TRTC Web SDK 版本 >= 5.2.0。
Web 平台各系統及配置要求如下表：

三、操作步驟

1. 引入並註冊插件

import { VirtualBackground } from 'trtc-sdk-v5/plugins/video-effect/virtual-background';

let trtc = TRTC.create({ plugins: [VirtualBackground] });

2. 開啟本地攝影機

await trtc.startLocalVideo();

3. 開啟虛擬背景插件

await trtc.startPlugin('VirtualBackground', {
  sdkAppId: 123123,
  userId: 'userID_123',
  userSig: 'your_userSig'
});

4. 按需更新參數

// 改为图片背景
await trtc.updatePlugin('VirtualBackground', {
  type: 'image',
  src: 'https://picsum.photos/seed/picsum/200/300'
});

5. 關閉虛擬背景

await trtc.stopPlugin('VirtualBackground');

四、API 說明

trtc.startPlugin('VirtualBackground', options)

用於開啟虛擬背景。

Name	Type	Attributes	Description
sdkAppId	number	必填	當前應用 ID
userId	string	必填	當前用戶 ID
userSig	string	必填	用戶 ID 對應的 UserSig
type	string	選填	`image`圖片背景 `blur`模糊背景（預設）
src	string	type 為`image`時必填	圖片地址，如 `https://picsum.photos/seed/picsum/200/300`
onError	(event) => {}	選填	運行過程中發生錯誤的回呼event.extraCode=10000003 渲染耗時長event.extraCode=10000006 瀏覽器特性支援不足，可能會出現卡頓情況推薦處理方法可參考常見問題

Example:

await trtc.startPlugin('VirtualBackground', {
  sdkAppId: 123123,
  userId: 'userID_123',
  userSig: 'your_userSig',
  type: 'image',
  src: 'https://picsum.photos/seed/picsum/200/300'
});

trtc.updatePlugin('VirtualBackground', options)

可修改虛擬背景參數。

options

Name	Type	Attributes	Description
type	string	選填	`image`圖片背景`blur`模糊背景（預設）
src	string	type 為`image`時必填	圖片地址，如 `https://picsum.photos/seed/picsum/200/300`

Example:

await trtc.updatePlugin('VirtualBackground', {
  type: 'blur'
});

trtc.stopPlugin('VirtualBackground')

關閉虛擬背景。

五、常見問題

1. 在 Chrome 中執行 Demo 發現畫面顛倒且卡頓？

本插件使用 GPU 進行加速，您需要在瀏覽器設定中找到使用硬體加速模式並啟用。可以將chrome://settings/system複製到瀏覽器網址列，並且開啟硬體加速模式。

2. 當設備效能不足造成延遲高，提示渲染耗時長？

可透過監聽事件，降低視訊解析度或者幀率。

function onError(event) {
    const { extraCode } = event;
    if (extraCode === 10000003 || extraCode === 10000006) {
        // 降低分辨率帧率
        await trtc.updateLocalVideo({
            option: {
                profile: '480p_2'
            },
        });
        // await trtc.stopPlugin('VirtualBackground'); // 或者关闭插件  
   }
}

await trtc.startPlugin('VirtualBackground', {
    ...// 其他参数
    onError,
});